<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_head :: head}">
</head>
<body>
<div class="layui-fluid">
  <div class="layui-row">
    <form class="layui-form">
      <div class="layui-form-item">
        <label for="title" class="layui-form-label">
          <span class="x-red">*</span>标题</label>
        <div class="layui-input-block" style="width: 65%;">
          <input type="text" th:value="${vo.title}" id="title" name="title" lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="type" class="layui-form-label">
          <span class="x-red">*</span>申请类型</label>
        <div class="layui-input-inline">
          <select id="type" lay-filter="type" name="type" lay-verify="required">
            <option value="leaveProcesses">申请请假</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>开始时间</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="startDate" name="startDate" placeholder="年-月-日 时-分-秒">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label"><span class="x-red">*</span>结束时间</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="endDate" name="endDate" placeholder="年-月-日 时-分-秒">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>描述</label>
        <div class="layui-input-block" style="width: 75%;">
          <textarea name="description" th:text="${vo.description}" placeholder="描述" class="layui-textarea" required
                    lay-verify="required"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <!--/*--> 使用隐藏域来提交到后台是暂存还是提交  <!--*/-->
        <input type="hidden" th:value="${status}" name="status">
        <button class="layui-btn" lay-submit lay-filter="add">保存提交</button>
        <button th:if="${status=='0'}" class="layui-btn layui-btn-normal" lay-submit lay-filter="save">暂存提交</button>
      </div>
    </form>
  </div>
</div>
<script th:inline="javascript">
  layui.use(['form', 'layer', 'laydate'], function () {
    var $ = layui.jquery;
    var form = layui.form,
        laydate = layui.laydate,
        layer = layui.layer;

    //日期范围
    laydate.render({
      elem: '#startDate'
      , value: [[${vo.startDate}]]
      , type: 'datetime'
    });
    //时间范围
    laydate.render({
      elem: '#endDate'
      , value: [[${vo.endDate}]]
      , type: 'datetime'
    });

    //监听提交
    form.on('submit(add)', function (data) {
      layer.prompt({
        formType: 2,
        value: '提交申请',
        title: '请输入流程备注',
        area: ['300px', '200px'] //自定义文本域宽高
      }, function (value, indexx, elem) {
        var pdata = data.field
        pdata.processRemarks = value;
        if (pdata.status == 0) {
          pdata.status = 1;
        }
        //发异步，把数据提交给
        $.post({
          data: pdata,
          url: '/user/editLeave/' + [[${processId}]],
          success: function (data) {
            layer.msg(data.message)
            if (data.code == 0) {
              var frameIndex = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
              window.setTimeout(function () {
                parent.layer.close(frameIndex); //再执行关闭
              }, 1800)
            }
          }
        });
        layer.close(indexx);
      });

      return false;
    });

    //监听提交
    form.on('submit(save)', function (data) {
      var pdata = data.field
      //发异步，把数据提交给
      $.post({
        data: pdata,
        url: '/user/editLeave/' + [[${processId}]],
        success: function (data) {
          layer.msg(data.message)
        }
      })
      return false;
    });
  });
</script>
</body>

</html>
